<template>
    <div class="login-container">
        <div class="form">
            <div class="tip">
                注：有 <span style="color:red;"> * </span> 的为必填项
            </div>
            <Login v-if="is_login" />
            <Register v-else @toggle_page="is_login = !is_login" />
            <div class="toggle-page-btn">
                {{ is_login ? "还没" : "已" }}有账号，
                <span @click="is_login = !is_login">
                    去{{ is_login ? "注册" : "登录" }} >
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import Login from "./login"
import Register from "./register"

export default {
    components: {
        Login,
        Register
    },
    data() {
        return {
            is_login: true
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.login-container {
    width: 100vw;
    height: 100vh;
    background-color: #c4dff6;
    overflow: hidden;
    .form {
        border: 3px solid #aca095;
        box-sizing: border-box;
        .self-center(fixed);
        background-color: #3be8b0;
        border-radius: 20px;
        padding: 20px;
        width: 360px;
        box-sizing: border-box;
        .tip {
            color: @secondary;
            font-size: 12px;
            text-align: right;
            margin-bottom: 15px;
        }
        .toggle-page-btn {
            color: @words;
            text-align: right;
            font-size: 12px;
            span {
                cursor: pointer;
                color: lighten(@primary, 20%);
                &:hover {
                    color: @primary;
                }
            }
        }
    }
}
</style>
